<template>
  <div class='container'>
    <el-dialog title="题目预览" :visible="showDialog" @close="close">
      <el-row type="flex">
        <el-col :span="6">
          <span>【题型】：{{ questionType }}</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】：{{ Data.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>【困难】：{{ difficulty }}</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】：{{ Data.tags }}</span>
        </el-col>
      </el-row>
      <el-row type="flex" style="margin-top:20px">
        <el-col :span="6">
          <span>【学科】：{{ Data.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ Data.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：{{ Data.direction }}</span>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row>
        <!-- 单选框 -->
        <div v-if="questionType === '单选题'">
          <p>【题干】：</p>
          <p style="color:blue">{{ question }}</p>
          {{ questionType }}选项：(以下选中的选项为正确答案)
          <ul>
            <li v-for="item in options" :key="item.id">
              {{ item.code }}
              <input type="radio" name="1" id="1" :checked='item.isRight === 1' style="margin:0 5px">
              {{ item.title }}
            </li>
          </ul>
        </div>
        <!-- 多选框 -->
        <div v-else-if="questionType === '多选题'">
          <p>【题干】：</p>
          <p style="color:blue">{{ question }}</p>
          {{ questionType }}题：(以下选中的选项为正确答案)
          <ul>
            <li v-for="item in options" :key="item.id">
              {{ item.code }}
              <input type="checkbox" name="" id="" :checked='item.isRight === 1' style="margin:0 10px">
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </div>
        <!-- 简单题 -->
        <span v-else>【题干】 ：{{ question }}</span>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 参考答案 -->
      <div>
        【参考答案】：
        <el-button @click='showVideo = !showVideo' type="danger">视频答案预览</el-button>
        <p>
          <video src="videoURL" v-if="showVideo" controls></video>
        </p>
      </div>
      <el-divider></el-divider>
      <!-- 答案解析 -->
      <p>
        【答案解析】:{{ answer }}
      </p>
      <el-divider></el-divider>
      <!-- 题目备注 -->
      <p>
        【题目备注】：{{ Data.remarks }}
      </p>
      <!-- 处理底部按钮 -->
      <el-row slot="footer" type="flex" justify="end">
        <el-button type="primary" @click="close">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { html2Text } from '@/utils'
import { detail as questionDetail } from '../../api/hmmm/questions'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: Number
    }
  },
  data() {
    return {
      Data: [],
      question: '',
      options: [],
      showVideo: false,
      answer: ''
    }
  },
  computed: {
    //处理题型
    questionType() {
      if (this.Data.questionType === '1') {
        return '单选题'
      } else if (this.Data.questionType === '2') {
        return '多选题'
      } else {
        return '简答题'
      }
    },
    //处理难度
    difficulty() {
      if (this.Data.difficulty === '1') {
        return '简单'
      } else if (this.Data.difficulty === '2') {
        return '一般'
      } else {
        return '困难'
      }
    }
  },

  methods: {
    async questionDetail() {
      const res = await questionDetail({ id: this.currentId })
      // console.log(res.data)
      this.Data = res.data
      this.question = html2Text(res.data.question)  //去掉question数据的标签
      this.answer = html2Text(res.data.answer) //去掉answer数据的标签
      this.options = res.data.options  //题目
      this.options = this.options.sort(function (a, b) {
        return a.id-b.id     //用id给当前题目进行排序
      })
    },
    close() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang='less'>
ul {
  padding-left: 0;
}

li {
  list-style: none;
  margin: 10px 0;
}
</style>
